<template>
  <div class="notice-index">
    <view class="page-title">消息通知</view>
    <!-- 滚动容器 -->
    <scroll-view
      :enable-back-to-top="true"
      :refresher-enabled="true"
      @refresherrefresh="onRefresherrefresh"
      :refresher-triggered="isTriggered"
      @scrolltolower="handleLoadMore"
      class="message-list"
      :scroll-y="true"
    >
      <view class="timeline">
        <view class="timeline-item" v-for="notice in notices" :key="notice.noticeId">
          <view class="timeline-line"></view>
          <view class="timeline-content">
            <NoticeCard :notice="notice" />
          </view>
        </view>
        <!-- 加载更多提示 -->
        <view class="load-more" v-if="hasMore">加载中...</view>
        <view class="no-more" v-else>没有更多数据了</view>
      </view>
    </scroll-view>

    <!-- 添加悬浮按钮 -->
    <view class="floating-button" @click="showAddNoticeDialog">
      <image class="button-icon" src="@/static/images/add.png" mode="aspectFit"></image>
    </view>

    <!-- 添加通知弹窗 -->
    <uni-popup ref="addNoticePopup" type="center" :maskClick="false">
      <view class="popup-container">
        <view class="popup-title">添加新通知</view>
        <view class="popup-form">
          <uni-easyinput
            v-model="newNotice.noticeTitle"
            placeholder="请输入通知标题"
            class="input-item"
          />
          <uni-easyinput
            v-model="newNotice.noticeContent"
            type="textarea"
            placeholder="请输入通知内容"
            class="input-item"
            :maxlength="200"
          />
        </view>
        <view class="popup-buttons">
          <button class="cancel-btn" @click="closeAddNoticeDialog">取消</button>
          <button class="confirm-btn" @click="addNewNotice">确认添加</button>
        </view>
      </view>
    </uni-popup>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue'
import NoticeCard from './components/NoticeCard.vue'
import { getNoticeListApi, addNoticeApi } from '@/services/notice'
import type { NoticeItem, NoticeParams } from '@/types/notice'
import UniPopup from '@dcloudio/uni-ui/lib/uni-popup/uni-popup.vue'
import { formatDate } from '@/utils'
// 模拟通知数据
const notices = ref<NoticeItem[]>([])
const hasMore = ref(true)
const isTriggered = ref(false)
const noticeParams = ref<NoticeParams>({
  pageNum: 1,
  pageSize: 10,
})

// 悬浮按钮和弹窗相关
const addNoticePopup = ref<InstanceType<typeof UniPopup> | null>(null)
const newNotice = ref<NoticeItem>({
  noticeTitle: '',
  noticeContent: '',
  createTime: '',
})

onMounted(() => {
  getNoticeList()
})

const getNoticeList = async () => {
  const res = await getNoticeListApi(noticeParams.value)
  // 添加数据
  if (noticeParams.value.pageNum === 1) {
    notices.value = res.data.rows
  } else {
    notices.value = [...notices.value, ...res.data.rows]
  }
  // 判断是否还有更多数据
  hasMore.value = res.data.rows.length === noticeParams.value.pageSize
  // 更新页码
  noticeParams.value.pageNum = (noticeParams.value.pageNum || 1) + 1
}
// 下拉刷新
const onRefresherrefresh = async () => {
  isTriggered.value = true
  // 根据当前标签刷新对应数据
  noticeParams.value.pageNum = 1
  noticeParams.value.pageSize = 10
  await getNoticeList()
  isTriggered.value = false
}
// 上拉加载更多
const handleLoadMore = async () => {
  if (hasMore.value) {
    noticeParams.value.pageNum = (noticeParams.value.pageNum ?? 1) + 1
    await getNoticeList()
  }
}

// 显示添加通知弹窗
const showAddNoticeDialog = () => {
  addNoticePopup.value?.open()
}

// 关闭添加通知弹窗
const closeAddNoticeDialog = () => {
  addNoticePopup.value?.close()
}

// 添加新通知
const addNewNotice = async () => {
  // 简单验证
  if (!newNotice.value.noticeTitle || !newNotice.value.noticeContent) {
    uni.showToast({
      title: '请填写标题和内容',
      icon: 'none',
    })
    return
  }

  try {
    // 调用添加通知API
    const res = await addNoticeApi(newNotice.value)
    if (res.code === 200) {
      uni.showToast({
        title: '添加成功',
        icon: 'success',
      })

      // 关闭弹窗
      closeAddNoticeDialog()

      // 刷新通知列表
      await onRefresherrefresh()

      // 重置表单
      newNotice.value = {
        noticeTitle: '',
        noticeContent: '',
        createTime: '',
      }
    }
  } catch (error) {
    console.error('添加通知失败:', error)
    uni.showToast({
      title: '添加失败，请重试',
      icon: 'none',
    })
  }
}
</script>

<style lang="scss">
.notice-index {
  padding: 20rpx;
  background-color: $notice-bg-color;
  min-height: 100vh;

  .page-title {
    font-size: 36rpx;
    font-weight: bold;
    margin-bottom: 30rpx;
    padding: 0 20rpx;
    color: $notice-text-primary;
  }

  .timeline {
    position: relative;
    padding-left: 40rpx;

    .timeline-item {
      position: relative;
      margin-bottom: 40rpx;
      display: flex;
      align-items: flex-start;

      .timeline-line {
        width: 2rpx;
        background-color: #eee;
        position: absolute;
        left: -31rpx;
        top: 52rpx;
        bottom: -40rpx;
      }

      .timeline-content {
        flex: 1;
        cursor: pointer;
      }

      &:last-child {
        .timeline-line {
          display: none;
        }
      }
    }
  }

  .load-more,
  .no-more {
    text-align: center;
    padding: 30rpx 0;
    color: $notice-text-tertiary;
    font-size: 28rpx;
  }

  // 悬浮按钮样式
  .floating-button {
    position: fixed;
    bottom: 60rpx;
    right: 60rpx;
    width: 120rpx;
    height: 120rpx;
    border-radius: 50%;
    background-color: $notice-primary-color;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6rpx 24rpx rgba(30, 136, 229, 0.4);
    z-index: 999;
    transition: all 0.3s;

    &:hover {
      transform: scale(1.1);
      box-shadow: 0 8rpx 30rpx rgba(30, 136, 229, 0.5);
    }

    .button-icon {
      width: 60rpx;
      height: 60rpx;
    }
  }

  // 弹窗样式
  .popup-container {
    width: 640rpx;
    background-color: white;
    border-radius: $notice-border-radius;
    padding: 30rpx;
    box-shadow: 0 10rpx 50rpx rgba(0, 0, 0, 0.15);

    .popup-title {
      font-size: 36rpx;
      font-weight: bold;
      text-align: center;
      margin-bottom: 30rpx;
      color: $notice-text-primary;
    }

    .popup-form {
      margin-bottom: 30rpx;

      .input-item {
        margin-bottom: 30rpx;
        border-radius: 8rpx;
      }
    }

    .popup-buttons {
      display: flex;
      justify-content: space-between;

      .cancel-btn {
        flex: 1;
        margin-right: 20rpx;
        background-color: #f5f5f5;
        color: $notice-text-secondary;
        border-radius: 44rpx;
      }

      .confirm-btn {
        flex: 1;
        margin-left: 20rpx;
        background-color: $notice-primary-color;
        color: white;
        border-radius: 44rpx;
      }
    }
  }
}
</style>
